import React, { Component } from 'react';
import BaseComponent from '@/components/BaseComponent';
import styles from './index.less';
import { Button, Card, Col, Row, Spin, Tabs } from 'antd';
import SearchForm from '@/pages/DataStatistics/GastroscopeTotalStatistics/SearchForm';
import StandardTable from '@/components/StandardTable';
import DetailView from '@/pages/DataStatistics/GastroscopeTotalStatistics/DetailView';
import ReactECharts from 'echarts-for-react';
import { connect } from 'dva';
import BarChartView from './BarChartView';

const { TabPane } = Tabs;

/**
 * 胃镜总量统计
 */
@connect(({ user, gastroscopestatistics, loading }) => ({
  currentUser: user.currentUser,
  data: gastroscopestatistics.data,
  isPreparing: loading.effects['gastroscopestatistics/getPageData'],
  isLoading: loading.effects['gastroscopestatistics/findByOrgIdAndUploadYear'],
}))
class GastroscopeTotalStatistics extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      //城市集合
      cities: [],
      //区县街道集合
      districtAndStreet: [],
      //字段
      record: {},
      //详情视图默认关闭
      detailViewState: false,
      //查看详情数据集合
      detailData: [],
      //默认被激活的tab页
      activeKey: 1,
    };
  }

  columns = [
    {
      title: '上报机构',
      // width: 100,
      align: 'center',
      dataIndex: 'org_name',
      key: 'org_name',
      fixed: 'left',
    },
    {
      title: '年度',
      width: 100,
      align: 'center',
      dataIndex: 'upload_year',
      key: 'upload_year',
      fixed: 'left',
    },
    {
      title: '省份',
      width: 100,
      align: 'center',
      dataIndex: 'province_name',
      key: 'province_name',
      fixed: 'left',
    },
    {
      title: '城市',
      width: 100,
      align: 'center',
      dataIndex: 'city_name',
      key: 'city_name',
      fixed: 'left',
    },
    {
      title: '区县',
      width: 100,
      align: 'center',
      dataIndex: 'region_name',
      key: 'region_name',
      fixed: 'left',
    },

    {
      title: '一月',
      width: 60,
      align: 'center',
      dataIndex: 'jan_count',
      key: 'jan_count',
    },
    {
      title: '二月',
      width: 60,
      align: 'center',
      dataIndex: 'feb_count',
      key: 'feb_count',
    },
    {
      title: '三月',
      width: 60,
      align: 'center',
      dataIndex: 'mar_count',
      key: 'mar_count',
    },
    {
      title: '四月',
      width: 60,
      align: 'center',
      dataIndex: 'apr_count',
      key: 'apr_count',
    },
    {
      title: '五月',
      width: 60,
      align: 'center',
      dataIndex: 'may_count',
      key: 'may_count',
    },
    {
      title: '六月',
      width: 60,
      align: 'center',
      dataIndex: 'jun_count',
      key: 'jun_count',
    },
    {
      title: '七月',
      width: 60,
      align: 'center',
      dataIndex: 'jul_count',
      key: 'jul_count',
    },
    {
      title: '八月',
      width: 60,
      align: 'center',
      dataIndex: 'aug_count',
      key: 'aug_count',
    },
    {
      title: '九月',
      width: 60,
      align: 'center',
      dataIndex: 'sept_count',
      key: 'sept_count',
    },
    {
      title: '十月',
      width: 60,
      align: 'center',
      dataIndex: 'oct_count',
      key: 'oct_count',
    },
    {
      title: '十一月',
      width: 80,
      align: 'center',
      dataIndex: 'nov_count',
      key: 'nov_count',
    },
    {
      title: '十二月',
      width: 80,
      align: 'center',
      dataIndex: 'dec_count',
      key: 'dec_count',
    },
    {
      title: '操作',
      key: 'operateCol',
      width: 100,
      fixed: 'right',
      render: (text, record, index) => {
        return (
          <div>
            <Button
              type="primary"
              size={'small'}
              style={{ marginRight: '8px' }}
              onClick={() => {
                this.detail(record);
              }}
            >
              查看
            </Button>
          </div>
        );
      },
    },
  ];

  componentDidMount() {
    this.getAllCities().then(data => {
      this.getPageData(data);
    });
  }

  /**获取列表信息*/
  getPageData = params => {
    this.execHttp('gastroscopestatistics/getPageData', {
      currentPage: 1,
      pageSize: 10,
      user: this.props.currentUser.id,
      ...params,
    });
  };

  /**根据主键查看信息*/
  findByOrgIdAndUploadYear = record => {
    if (this.props.isLoading) {
      return;
    }
    const hide = this.loadingMessage('加载中...');
    const { org_id, upload_year } = record;
    this.execHttp('gastroscopestatistics/findByOrgIdAndUploadYear', {
      orgId: org_id,
      uploadYear: upload_year,
    })
      .then(resp => {
        if (hide) {
          hide();
        }
        if (resp) {
          const {
            success,
            data: { dataMap },
          } = resp;
          this.setState({
            //视图数据
            detailData: dataMap,
            //抽屉状态
            detailViewState: true,
            //参数
            record: record,
          });
        }
      })
      .catch(reason => {
        if (hide) {
          hide();
        }
      });
  };

  /**点击获取省下面的城市*/
  getAllCities = () => {
    return new Promise((resolve, reject) => {
      this.execHttp('orgsetting/getAllProvinceCity', {
        parentRegionCode: '340000',
        user: this.props.currentUser.id,
      }).then(resp => {
        if (resp && resp.success) {
          const {
            success,
            data: { list },
          } = resp;
          if (success) {
            this.setState(
              {
                cities: list,
              },
              () => {
                // list.length为1表示为地市疾控账户登录
                if (list && list.length == 1) {
                  this.searchform.setSelectedCity(list[0].id); // 加载区县数据
                  this.getDistrictAndStreet(list[0].id);
                  resolve({ city_code: list[0].id });
                } else {
                  resolve({ city_code: '' });
                }
              }
            );
          }
        }
      });
    });
  };

  /**获取城市下的区街道信息*/
  getDistrictAndStreet = val => {
    this.execHttp('orgsetting/getDistrictAndStreet', {
      parentRegionCode: val,
    }).then(resp => {
      if (resp && resp.success) {
        const { success, data } = resp;
        if (success) {
          this.setState({
            districtAndStreet: data.list,
          });
        }
      }
    });
  };

  render() {
    const {
      cities,
      districtAndStreet,
      detailViewState,
      detailData,
      activeKey,
      record,
    } = this.state;

    const { data } = this.props;

    return (
      <div className={styles.gastroscopeTotalStatistics}>
        <Card bordered={true} title={'胃镜总量统计'}>
          <SearchForm
            wrappedComponentRef={searchform => (this.searchform = searchform)}
            cityList={cities}
            districtAndStreetList={districtAndStreet}
            onSelectedCity={this.handleOnSelectedCity}
            onSearchClick={this.handleOnSearchClick}
            onResetClick={this.handleOnResetClick}
          ></SearchForm>
        </Card>

        <Card bordered={true} className={styles.contentBox}>
          <Tabs defaultActiveKey={activeKey} onChange={this.handleTabChange}>
            <TabPane tab="统计报表" key="1"></TabPane>
            <TabPane tab="统计图表" key="2"></TabPane>
          </Tabs>
          {activeKey == 1 ? (
            this.props.isPreparing ? (
              <div className={styles.spinBox}>
                <Spin />
              </div>
            ) : (
              <StandardTable
                hasSelection={false}
                onChange={this.handleBasicTableChange}
                selectedRows={[]}
                loading={false}
                data={data}
                columns={this.columns}
                rowKey="id"
                scroll={{ x: true }}
              />
            )
          ) : null}
          {activeKey == 2 ? (
            <Row>
              {data.list && data.list.length > 0
                ? data.list.map((item, index) => {
                    return (
                      <BarChartView
                        record={item}
                        key={index}
                        onItemClick={this.handleOnChartItemClick}
                      ></BarChartView>
                    );
                  })
                : null}
            </Row>
          ) : null}
        </Card>
        {/* 查看详情 */}
        {detailViewState ? (
          <DetailView
            // 编辑视图的显示状态
            visible={this.state.detailViewState}
            //视图数据
            detailData={detailData}
            //关闭视图抽屉
            onClose={this.handleDetailViewClose}
            //字段
            record={this.state.record}
          ></DetailView>
        ) : null}
      </div>
    );
  }

  /**
   * 点击查看按钮
   * */
  detail = record => {
    this.findByOrgIdAndUploadYear(record);
  };

  /**
   * 图表详情被点击
   * @param record
   */
  handleOnChartItemClick = record => {
    this.findByOrgIdAndUploadYear(record);
  };

  /**
   * 获取城市下的区街道信息
   * */
  handleOnSelectedCity = value => {
    if (value !== undefined) {
      this.getDistrictAndStreet(value);
    } else {
      this.setState({
        districtAndStreet: [],
      });
    }
  };

  /**
   * 重置
   */
  handleOnResetClick = () => {
    this.getPageData();
  };

  /**
   * 查询
   * @param data
   */
  handleOnSearchClick = data => {
    this.getPageData(data);
  };

  /**
   * 点击关闭抽屉
   * */
  handleDetailViewClose = () => {
    this.setState({
      detailViewState: false,
    });
  };

  handleTabChange = key => {
    this.setState({ activeKey: key });
  };

  handleBasicTableChange = () => {};
}

export default GastroscopeTotalStatistics;
